
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.default = void 0;

const _utils = require('../utils');

const _constant = require('../utils/constant');

const _relation = require('../mixins/relation');

const _icon = _interopRequireDefault(require('../icon'));

const _createNamespace = (0, _utils.createNamespace)('step');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];

const _default = createComponent({
  mixins: [(0, _relation.ChildrenMixin)('vanSteps')],
  computed: {
    status: function status() {
      if (this.index < this.parent.active) {
        return 'finish';
      }

      if (this.index === +this.parent.active) {
        return 'process';
      }
    },
    active: function active() {
      return this.status === 'process';
    },
  },
  methods: {
    genCircle: function genCircle() {
      const h = this.$createElement;
      const _this$parent = this.parent;
      const { activeIcon } = _this$parent;
      const { activeColor } = _this$parent;
      const { inactiveIcon } = _this$parent;

      if (this.active) {
        return this.slots('active-icon') || h(_icon.default, {
          class: bem('icon', 'active'),
          attrs: {
            name: activeIcon,
            color: activeColor,
          },
        });
      }

      const inactiveIconSlot = this.slots('inactive-icon');

      if (inactiveIcon || inactiveIconSlot) {
        return inactiveIconSlot || h(_icon.default, {
          class: bem('icon'),
          attrs: {
            name: inactiveIcon,
          },
        });
      }

      return h('i', {
        class: bem('circle'),
      });
    },
    onClickStep: function onClickStep() {
      this.parent.$emit('click-step', this.index);
    },
  },
  render: function render() {
    let _ref;

    const h = arguments[0];
    const { status } = this;
    const { active } = this;
    const _this$parent2 = this.parent;
    const { activeColor } = _this$parent2;
    const { direction } = _this$parent2;
    const titleStyle = active && {
      color: activeColor,
    };
    const lineStyle = status === 'finish' && {
      background: activeColor,
    };
    return h('div', {
      class: [_constant.BORDER, bem([direction, (_ref = {}, _ref[status] = status, _ref)])],
    }, [h('div', {
      class: bem('title', {
        active,
      }),
      style: titleStyle,
      on: {
        click: this.onClickStep,
      },
    }, [this.slots()]), h('div', {
      class: bem('circle-container'),
      on: {
        click: this.onClickStep,
      },
    }, [this.genCircle()]), h('div', {
      class: bem('line'),
      style: lineStyle,
    })]);
  },
});

exports.default = _default;
